<template>
<transition name="fade">
  <div class="chose-plot" v-show="showFlag">
   <!-- <head-top :head-title="'选择小区-'+cityName" go-back="true" choseCity="切换城市" @city="toChoseCity"></head-top> -->
    <header class="head">
      <img src="../header/images/fanhui@2x.png" alt="" @click="go">
      <span class="selected">选择小区</span>
    </header>
    <section class="plot">
      <div class="search">
        <div class="search-wrapper">
          <input type="text" placeholder="请输入小区的名称" v-model="keyword"  @keyup.enter="search"  @input="search">
          <span class="search-icon" @click="search"></span>
        </div>
      </div>
      <div class="now-plot">所在的小区</div>
      <ul>
        <li v-for="(item,index) in lists" :key="index" tag="div" class="line" @click="goBack(item)">
          {{item.title}}
        </li>
      </ul>
    </section>
  </div>
</transition>
</template>

<script>
import commonUrl from '../../common/js/commonUrl.js'
import {loadCity, loadCityId, saveVillageId, saveTitle} from '../../common/js/cache.js'
export default {
  data () {
    return {
      lists: [],
      keyword: '',
      cityName: loadCity(),
      showFlag: false
    }
  },
  created() {
    this.getPlot()
  },
  methods: {
    toChoseCity () {
      this.$router.push({
        path: '/home/ChoseCity'
      })
    },
    getPlot() {
      const url = commonUrl.apihost + 'index.php/home/city/village?districtId=' + loadCityId()
      this.$http.get(url).then(res => {
        if (res.status === 200) {
          this.lists = res.data.data
        }
      })
    },
    search() {
      const url = commonUrl.apihost + 'index.php/home/city/search?key=' + this.keyword + '&cityId=' + loadCityId()
      this.$http.get(url).then(res => {
        if (res.status === 200) {
          this.lists = res.data.data
        }
      })
    },
    goBack(item) {
      this.$emit('passVillage', item.title, item.id)
      saveVillageId(item.id)
      saveTitle(item.title)
      this.showFlag = false
    },
    show() {
      this.showFlag = true
    },
    go() {
      this.showFlag = false
    }
  }
}
</script>

<style lang="scss">
@import '../../common/sass/mixin.scss';
.chose-plot{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 667;
    overflow-y: auto;
    background-color: #fff;
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, 0);
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all .3s linear
    }
    &.fade-enter,
    &.fade-leave-to {
      transform: translate3d(100%, 0, 0);
    }
    &.fade-enter-to,
    &.fade-leave {
      transform: translate3d(0, 0, 0);
    }
    .head {
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #0078de;
      img{
        width: 9px;
        height: 16px;
        float: left;
        margin: 13px 0 0 10px;
      }
      .selected {
        font-size: 17px;
        color: #fff;
      }
    }
  .plot{
    background: #fff;
    .search {
      text-align: center;
      height: 44px;
      line-height: 44px;
      .search-wrapper {
        position: relative;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          position: absolute;
          top: 6px;
          /*right: 10px;*/
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          @include bgimg('../home/images/search');
        }

      }
    }
    .now-plot{
      padding-left: 10px;
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      background-color: #D9D9D9;
    }
    ul{
      padding: 0 10px;
      .line{
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid rgb(217,217,217);
        font-size: 15px;
        &:last-child{
          border-bottom: 1px solid transparent;
        }
      }
    }
  }
}
</style>
